<template>
  <div class="btn-tabs">
    <el-tabs v-loading="loading" :value="value" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in tabsPane"
        :key="item.name"
        v-has="item.permission"
        :label="item.label"
        :name="item.name"
        v-bind="item"
      >
        <slot :name="item.name"></slot>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: String,
    loading: Boolean,
    type: {
      type: String,
      default: "card"
    },
    tabsList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    tabsPane() {
      return this.tabsList.filter(i => !i.hiden);
    }
  },
  methods: {
    handleClick(vm, e) {
      this.$emit("change", vm.name);
      this.$emit("tab-click", vm, e);
    }
  }
};
</script> 
<style lang="scss" scoped>
@import "@Components/assets/styles/vx-table-variables.scss";
.btn-tabs {
  width: 100%;
  border: 1px solid rgba(211, 211, 211, 0.5);
  border-bottom: none;
  border-top: none;
  background: $vxe-table-header-background-color;
  white-space: nowrap;

  &-flex {
    white-space: nowrap;
    display: inline-block;
    margin-right: 15px;
  }
  &-items {
    padding: 7px 10px;
  }
  &-div {
    display: inline-block;
  }
  /deep/ .el-tabs__active-bar {
    opacity: 0.1;
    height: 56px !important;
  }
  /deep/ .el-tabs__active-bar:before {
    content: "";
    left: -40px;
    bottom: 0;
    position: absolute;
    transform: rotate(0deg);
    border: 20px solid #1890ff;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }
  /deep/ .el-tabs__active-bar:after {
    content: "";
    right: -40px;
    bottom: 0;
    position: absolute;
    transform: rotate(0deg);
    border: 20px solid #1890ff;
    border-right: 20px solid transparent;
    border-top: 20px solid transparent;
  }
  /deep/ .el-tabs__header {
    margin: 0;
  }
  /deep/ .el-tabs__nav-scroll {
    height: 40px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    transform: scale(0.9);
    transform-origin: center;
    display: inline-block;
    padding: 0 30px;
    border-radius: 50px;
  }
  /deep/ .el-tabs__nav-wrap::after{
    background-color:transparent;
  }
}
</style>

